<template>
  <div :class="{'app-container':!isCommon}">
    <p>代理销售排行（销售金额累计TOP20）</p>
    <div class="chart-wrapper-box">
      <el-table :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" :data="dlxsData"
                border style="width: 100%" v-loading="dlxsloading">
        <el-table-column prop="index" label="序号" width="50"/>
        <el-table-column prop="shopName" label="代理名称"></el-table-column>
        <el-table-column prop="officeName" label="分公司名称"></el-table-column>
        <el-table-column prop="saleNumber" label="订单金额"/>
        <el-table-column prop="salesAmount" label="销售金额"/>
        <el-table-column prop="salesCoMent" label="销售提成"/>
        <el-table-column prop="procureFlow" label="采购成本"/>
        <el-table-column prop="goodsCost" label="商品成本"/>
        <el-table-column prop="logisticsCost" label="物流成本"/>
        <el-table-column prop="estimatedProfit" label="预估利润"/>
        <el-table-column prop="profitRate" label="利润率"/>
        <el-table-column prop="companyPerk" label="公司补贴"/>
        <el-table-column prop="bounsMent" label="奖金"/>
        <el-table-column prop="userNumber" label="学员数量"/>
        <el-table-column prop="shopNumber" label="店铺数量"/>
      </el-table>
      <pagination v-show="dlxstotal>0" :total="dlxstotal" :page.sync="dlxsParams.pageNum"
                  :limit.sync="dlxsParams.pageSize" @pagination="getHeadOfficeAgentSaleRankingMonthData"/>
    </div>
  </div>
</template>

<script>
import {HeadOfficeAgentSaleRankingMonthData} from "@/api/index";

export default {
  name: "agentData",
  props: {
    isCommon: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      dlxsData: [],
      dlxsloading: false,
      dlxsParams: {
        pageSize: 10,
        pageNum: 1
      },
      dlxstotal: 0
    }
  },
  created() {
    this.getHeadOfficeAgentSaleRankingMonthData()
  },
  methods: {
    // 代理销售排行（销售金额累计TOP20）
    getHeadOfficeAgentSaleRankingMonthData() {
      this.dlxsloading = true;
      HeadOfficeAgentSaleRankingMonthData(this.dlxsParams).then(res => {
        this.dlxsData = res.rows;
        this.dlxstotal = res.total;
        this.dlxsloading = false;
      })
    },
  }
}
</script>

<style scoped>

</style>
